<template>
	<view class="process-step-main">
		<view v-if="videoList.length" class="video-body">
			<view class="video-title equipment_text">
				查看视频
			</view>
			<view class="video-list">
				<view v-for="(item,index) in videoList" :key="item.deviceSn" class="item">
					<view class="fs-video" v-if="item.addrDomain">
						<video :is-live="true" @play="videoPlayHandle" class="fs-video_content" :src="item.addrDomain"
							initial-time="0" :show-center-play-btn="true" id="video" controls :autoplay="true"
							:loop="false" :muted="true" direction="0" />
					</view>
				</view>
			</view>
			<view v-if="total > 3" class="paging">
				<view @click="lastQueryHandle" class="last" :class="{ 'display':deviceQuery.pageIndex == 1 }">
					上一页
				</view>
				<view @click="nextQueryHandle" class="next" :class="{ 'display':deviceQuery.pageIndex == pages }">
					下一页
				</view>
			</view>
		</view>
		<view class="step">
			<view class="step-title equipment_text">
				作业步骤
			</view>
			<view class="step-body">
				<view v-if="JSON.stringify(scanSignData)!='{}'" class="item global_box">
					<view class="item-title">
						<view class="serial">
							1
						</view>
						<view class="name" :class="{'require':scanSignData.procedureStep.enabledRequired==0}">
							{{scanSignData.procedureStep.name}}
						</view>
					</view>
					<view class="scan-class">
						<image @click="sanHandle"
							src="https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/bus/scanCode01.png" mode=""
							style="width: 128rpx;height:128rpx;margin-top: 20rpx;vertical-align:middle;"></image>
						<text style="color:#07C160;margin-left: 40rpx;" v-if="checkItemData.clockType">打卡成功</text>
					</view>
				</view>
				<view v-for="(item,index) in processList" :key="item.procedureStep.id" class="item global_box">
					<view class="item-title">
						<view class="serial">
							{{ JSON.stringify(scanSignData)!='{}' ?  index+2 : index+1 }}
						</view>
						<view class="name" :class="{'require':item.procedureStep.enabledRequired==0}">
							{{item.procedureStep.name}}
						</view>
					</view>
					<view v-if="item.procedureStep.type==0" class="item-body">
						<!-- 是非 -->
						<radio-group @change="radiotypeHandle">
							<view v-for="(itemtype0,indextype0) in item.stepItems" :key="itemtype0.id">
								<radio :disabled="!authorityStatus" :value="JSON.stringify(itemtype0)"
									:checked="itemtype0.id == item.result.itemIds[0]" />
								<text>{{itemtype0.content}}</text>
							</view>
						</radio-group>
					</view>
					<view v-if="item.procedureStep.type==3" class="item-body">
						<!-- 单选 -->
						<radio-group @change="radiotypeHandle">
							<view v-for="(itemtype3,indextype3) in item.stepItems" :key="itemtype3.id">
								<radio :disabled="!authorityStatus" :value="JSON.stringify(itemtype3)"
									:checked="itemtype3.id == item.result.itemIds[0]" />
								<text>{{itemtype3.content}}</text>
							</view>
						</radio-group>
					</view>

					<view v-if="item.procedureStep.type==2" class="item-body">
						<!-- 多选 -->
						<checkbox-group @change="checkTypeHandle">
							<view v-for="(itemtype2,indextype2) in item.stepItems" :key="itemtype2.id">
								<checkbox :disabled="!authorityStatus" :value="JSON.stringify(itemtype2)"
									:checked="item.result.itemIds && item.result.itemIds.includes(itemtype2.id)">
								</checkbox>
								<text>{{itemtype2.content}}</text>
							</view>
						</checkbox-group>
					</view>

					<view v-if="item.procedureStep.type==5" class="item-body">
						<!-- 单行 -->
						<input :disabled="!authorityStatus" @blur="lineInputHandle(item)" class="input"
							v-model="item.result.content" type="text" placeholder="请输入">
					</view>

					<view v-if="item.procedureStep.type==20" class="item-body">
						<!-- 数字 -->
						<input :disabled="!authorityStatus" @blur="lineInputHandle(item)" @input="numInputHandle(item)"
							v-model="item.result.content" class="input" type="text" placeholder="请输入">
					</view>

					<view v-if="item.procedureStep.type==4" class="item-body">
						<!-- 多行 -->
						<textarea :disabled="!authorityStatus" @blur="lineInputHandle(item)"
							v-model="item.result.content" placeholder="请输入140个字以内的内容"></textarea>
					</view>

					<view v-if="item.procedureStep.content" class="item-content">
						<view class="title">
							作业标准:
						</view>
						<view class="data">
							{{item.procedureStep.content}}
						</view>
					</view>

					<view v-if="item.procedureStep.enabledCamera!==1" class="image-class">
						<view class="title" :class="{'require':!item.procedureStep.enabledCamera}">
							拍照
						</view>
						<view class="image-list">
							<view class="image-item" v-for="(imgItem, imgIndex) in item.result.imgPaths"
								:key="imgIndex">
								<image class="uploadImg mr20" :src="imgItem" mode="aspectFit|aspectFill|widthFix"
									lazy-load="false">
								</image>
							</view>
							<image v-if="authorityStatus && item.result.imgPaths.length < 3" class="uploadImg mr20 mt15"
								src="https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/bus/camera01.png"
								mode="aspectFit|aspectFill|widthFix" lazy-load="false" @click="tapchoosePhoto1(item)">
							</image>
						</view>
					</view>

					<view v-if="item.procedureStep.enabledVideo!==1" class="video-class">
						<view class="title" :class="{'require':!item.procedureStep.enabledVideo}">
							拍摄
						</view>
						<view class="image-list">
							<view class="image-item" v-for="(videoItem, videoIndex) in item.result.videoPaths"
								:key="videoIndex">
								<video :id="'video-'+videoIndex" class="uploadImg mr20"
									@play="playHandle('video-'+videoIndex)" @fullscreenchange="fullscreenchange"
									:src="videoItem" controls="true">
								</video>
							</view>
							<image v-if="authorityStatus && item.result.videoPaths.length < 1"
								class="uploadImg mr20 mt15"
								src="https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/bus/camera01.png"
								mode="aspectFit|aspectFill|widthFix" lazy-load="false" @click="tapchoosePhoto2(item)">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="authorityStatus" class="footer">
				<view @click="addWorkHandle">
					发起工单
				</view>
				<view @click="submitProcessHandle">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		request
	} from '../../request/index.js'

	export default {
		data() {
			return {
				bj_img: 'https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/fsw-wx-lmini/icons/uploadImg.png',
				handleQuery: {},
				checkItemData: {},
				videoList: [],
				processList: [],
				procedureSteps: [], //  提交参数 
				scanSignData: {}, //  将扫码的对象摘出来
				videoContext: {},
				checkObj: {},
				authorityStatus: false, //  判断当前节点是否为处理节点
				deviceQuery: {
					pageIndex: 1,
					pageSize: 3,
					type: 10,
					projectId: uni.getStorageSync("projectId") || "16154516457903604960000255341083",
				},
				total: 0,
				pages: 0,
				playTimeSpan: undefined,
				playTimeStatus: false
			};
		},
		onLoad(options) {
			this.checkItemData = JSON.parse(options.item)
			this.handleQuery = JSON.parse(options.query)
			this.checkObj = JSON.parse(options.checkObj)
			

			//  判断是否是处理节点
			if (this.checkObj.stepDefineFlag == 'execute_step') {
				this.authorityStatus = true  //  处理标识
				this.playTimeSpan = +options.playTimeSpan  //  视频时间
				if (this.playTimeSpan) this.playTimeStatus = true //  标记有计时限制
			}
			if (this.checkItemData.procedureVo.checkStatus == 1) {
				//  checkStatus为1说明已提交,需要数据回显.做一些初始化
				const list = this.checkItemData.procedureVo.contentInfo.procedureSteps.filter(item => {
					if (!item.result) item.result = {}
					if (!item.result.imgPaths) item.result.imgPaths = []
					if (!item.result.content) item.result.content = ""
					if (!item.result.itemIds) item.result.itemIds = []
					if (!item.result.videoPaths) item.result.videoPaths = []

					//  签到步骤抽离出来
					if (item.procedureStep.type == 50) this.scanSignData = item
					else return item
				})
				this.processList = list
				list.forEach(item => {
					//  将消息步骤排除，并做初始化赋值
					console.log('item', item);
					if (item.procedureStep.type != 6) this.procedureSteps.push({
						check: {
							checkDate: item.check.checkDate,
							checkStatus: item.check.checkStatus
						},
						procedureStepId: item.procedureStep.id,
						result: {
							content: item.result.content,
							imgPaths: [...item.result.imgPaths],
							itemIds: [...item.result.itemIds],
							videoPaths: [...item.result.videoPaths]
						},
					})
				})
			} else {
				//  未提交工序步骤数据，获取工序步骤
				this.getProcessHandle()
			}

			if (this.checkItemData.objectType == 0) {
				//  设备类型,并且设备是摄像头类型的情况下
				if (this.checkItemData.objectInfo.type == 10) this.getVideoHandle([this.checkItemData.objectInfo.deviceSn])
			} else {
				this.deviceQuery.spaceId = this.checkItemData.objectInfo.id
				//  空间类型，拉取空间关联设备
				this.getDeviceVideoHandle()
			}
		},
		onUnload() {
			//  销毁事件
			//  停流
			const deviceSns = this.videoList.map(item => item.deviceSn)
			if (deviceSns.length) request({
				url: "api/oct/wemini/fsVideo/stopVideo",
				method: "POST",
				data: {
					deviceSns: deviceSns
				}
			})
		},
		methods: {
			videoPlayHandle() {
				//  播放成功事件
				if (this.authorityStatus && this.playTimeStatus) {
					const timeObj = setInterval(() => {
						this.playTimeSpan -= 1
						console.log(this.playTimeSpan);
						if (this.playTimeSpan == -1) clearInterval(timeObj)
					}, 1000)
				}
			},
			async getVideoHandle(deviceSnS, status) {
				const res = await request({
					url: "api/oct/wemini/fsVideo/getInternetAddress",
					method: "POST",
					data: {
						deviceSnS,
						streamType: "hls",
					}
				})
				if (res.status == 0) {
					this.videoList = res.payload
				} else {
					uni.showToast({
						title: "拉取视频流接口失败!",
						icon: "none",
						duration: 2000
					})
				}
			},
			lastQueryHandle() {
				if (this.deviceQuery.pageIndex == 1) return

				//  停流
				const deviceSns = this.videoList.map(item => item.deviceSn)
				request({
					url: "api/oct/wemini/fsVideo/stopVideo",
					method: "POST",
					data: {
						deviceSns: deviceSns
					}
				})

				this.deviceQuery.pageIndex -= 1
				this.getDeviceVideoHandle()
			},
			nextQueryHandle() {
				if (this.deviceQuery.pageIndex == this.pages) return

				//  停流
				const deviceSns = this.videoList.map(item => item.deviceSn)
				request({
					url: "api/oct/wemini/fsVideo/stopVideo",
					method: "POST",
					data: {
						deviceSns: deviceSns
					}
				})

				this.deviceQuery.pageIndex += 1
				this.getDeviceVideoHandle()
			},
			async getDeviceVideoHandle() {
				//  通过空间查询关联设备
				const res = await request({
					url: "api/oct/wemini/bus/workOrder/findDevicePage",
					method: "POST",
					data: this.deviceQuery
				})
				if (res.status == 0) {
					this.total = res.payload.total
					this.pages = res.payload.pages
					this.getVideoHandle(res.payload.records.map(item => item.deviceSn))
				} else {
					uni.showToast({
						title: "获取关联设备失败!",
						icon: "none",
						duration: 2000
					})
				}
			},
			async sanHandle() {
				if (this.checkItemData.clockType || !this.authorityStatus) return
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: async (result) => {
						//  校验二维码是否正确有效
						const res = await request({
							url: "api/oct/wemini/bus/jobEx/job/qrcode",
							method: "POST",
							data: result.result
						})
						if (res.status == 0) {
							//  二维码有效 提交打卡数据
							const newDate = this.getCurrentTime()
							const data = {
								clockInFlag: true,
								...this.handleQuery,
								procedure: {
									clockType: 1,
									clockDate: newDate,
									objectProcedureId: this.handleQuery.procedure.objectProcedureId,
									objectId: this.handleQuery.procedure.objectId,
									procedureId: this.handleQuery.procedure.procedureId,
									objectType: this.checkItemData.objectType
								}
							}

							const res = await request({
								url: "api/oct/wemini/bus/workOrder/handleWorkOrder",
								method: "POST",
								data
							})
							if (res.status == 0) {
								this.checkItemData.clockType = 1
								this.checkItemData.clockDate = newDate
								uni.showToast({
									title: "打卡成功!",
									icon: "none",
									duration: 2000
								})
							} else {
								uni.showToast({
									title: "提交打卡数据失败!",
									icon: "none",
									duration: 2000
								})
							}
						} else {
							uni.showToast({
								title: "设备二维码校验失败!",
								icon: "none",
								duration: 2000
							})
						}
					}
				})
			},
			tapchoosePhoto1(item) {
				const that = this
				uni.chooseMedia({
					count: 3,
					mediaType: ['image'],
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success(res) {
						that.btndetermine(res.tempFiles, 1, item)
					}
				})
			},
			tapchoosePhoto2(item) {
				const that = this
				uni.chooseMedia({
					count: 3,
					mediaType: ['video'],
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					maxDuration: 15,
					camera: 'back',
					success(res) {
						that.btndetermine(res.tempFiles, 2, item)
					}
				})
			},
			playHandle(id) {
				this.videoContext = uni.createVideoContext(id, this)
				this.videoContext.play()
				this.videoContext.requestFullScreen()
			},
			numInputHandle(item) {
				this.$nextTick(() => {
					item.result.content = item.result.content.replace(/[^0-9]+/g, '')
				})
			},
			//退出全屏时停止播放
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.stop()
				}
			},
			addWorkHandle() {
				uni.navigateTo({
					url: `../add-work/add-work?checkItemData=${JSON.stringify(this.checkItemData)}`
				})
			},
			async btndetermine(paths, type, item) {
				// type 1 =>照片 type 2 =>视频
				if (paths.length === 0) {
					await showToast({
						title: '请先选择图片或者视频'
					})
					return
				}
				let images = []
				let that = this
				for (var i = 0; i < paths.length; i++) {
					uni.uploadFile({
						url: `${baseUrl}/api/oct/wemini/file/upload`,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							openid: uni.getStorageSync("openid") || "oRekA4wN8O7hyfAlgdRNl4ughrm4"
						},
						filePath: paths[i].tempFilePath, // 文件临时路径；
						name: 'file', // 文件名，可以随便写
						formData: {
							type: 'image',
							model: 'task'
						},
						success: function(res) {
							if (res.statusCode === 200) {
								let data = JSON.parse(res.data)
								images.push(data.payload)
							}
							if (images.length === paths.length) {
								//  判断是否已经添加
								const findObj = that.procedureSteps.find(obj => obj.procedureStepId == item
									.procedureStep.id)
								console.log('findObj', findObj);
								if (!findObj) {
									//  未添加的情况下
									const check = that.hasRequireHandle(item.procedureStep.id)
									const tempObj = {
										procedureStepId: item.procedureStep.id,
										check,
										result: {
											content: item.result.content,
										}
									}
									//  照片与摄像的参数不一样 images是接口提交参数 paths是回显参数
									if (type == 1) {
										tempObj.result.imgPaths = [...images]
										item.result.imgPaths = [...item.result.imgPaths, ...paths.map(
											item =>
											item.tempFilePath)]
									} else if (type == 2) {
										tempObj.result.videoPaths = [...images]
										item.result.videoPaths = [...item.result.videoPaths, ...paths.map(
											item =>
											item.tempFilePath)]
									}
									that.procedureSteps.push(tempObj)
								} else {
									if (type == 1) {
										console.log('findObj.result', findObj.result)
										console.log('images', images)
										console.log('paths', paths)
										console.log('item', item);
										findObj.result.imgPaths = [...findObj.result.imgPaths, ...images]
										item.result.imgPaths = [...item.result.imgPaths, ...paths.map(
											item =>
											item.tempFilePath)]
									} else if (type == 2) {
										findObj.result.videoPaths = [...findObj.result.videoPaths, ...
											images
										]
										item.result.videoPaths = [...item.result.videoPaths, ...paths.map(
											item =>
											item.tempFilePath)]
									}
								}
							}
						}
					})
				}
			},
			getCurrentTime() {
				var date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()

				let hour = date.getHours()
				let minutes = date.getMinutes()
				let seconds = date.getSeconds()
				let str = year + '-'
				str = str + (month > 9 ? month : '0' + month) + '-'
				str = str + (day > 9 ? day : '0' + day) + ' '

				str = str + (hour > 9 ? hour : '0' + hour) + ':'
				str = str + (minutes > 9 ? minutes : '0' + minutes) + ':'
				str = str + (seconds > 9 ? seconds : '0' + seconds)
				return str
			},
			hasRequireHandle(procedureStepId) {
				const check = {}
				const obj = this.processList.find(item => item.procedureStep.id == procedureStepId)
				if (obj) {
					if (obj.procedureStep.enabledRequired == 0) check.checkStatus = 1
					else if (obj.procedureStep.enabledRequired == 2) check.checkStatus = 2
					check.checkDate = this.getCurrentTime()
				}
				return check
			},
			lineInputHandle(obj) {
				console.log('obj', obj);
				const check = this.hasRequireHandle(obj.procedureStep.id)

				const findObj = this.procedureSteps.find(item => item.procedureStepId == obj.procedureStep.id)
				if (findObj) {
					findObj.result.content = obj.result.content
					findObj.result.itemIds = [obj.id]
				} else {
					this.procedureSteps.push({
						procedureStepId: obj.procedureStep.id,
						check,
						result: {
							content: obj.result.content,
							imgPaths: [],
							videoPaths: []
						}
					})
				}
			},
			async submitProcessHandle() {
				//  打卡的数据单独拎出来校验
				if (this.scanSignData.procedureStep && !this
					.checkItemData.clockType) return uni.showToast({
					title: "有必填项尚未填写",
					icon: "none",
					duration: 2000
				})
				if (this.authorityStatus && this.playTimeStatus && this.playTimeSpan != -1) {
					return uni.showToast({
						title: `观看时长还差${this.playTimeSpan}秒,请稍后再试`,
						icon: "none",
						duration: 2000
					})
				}

				//  校验必填
				const status = this.processList.find(item => {
					if (item.procedureStep.enabledRequired == 0) {
						const obj = this.procedureSteps.find(item2 => item2.procedureStepId == item
							.procedureStep.id)
						if (!obj) return true
						//  判断强制拍照
						if (item.procedureStep.enabledCamera == 0 && !obj.result.imgPaths.length) return true
						//  判断强制摄像
						if (item.procedureStep.enabledVideo == 0 && !obj.result.videoPaths.length) return true
					}
				})
				if (status) return uni.showToast({
					title: "有必填项尚未填写",
					icon: "none",
					duration: 2000
				})

				//  提交处理工序数据
				this.handleQuery.procedure.procedureSteps = this.procedureSteps

				//  由于有消息步骤的存在，procedureSteps不能为空。必须要有一段值
				if (!this.handleQuery.procedure.procedureSteps.length) this.handleQuery.procedure.procedureSteps.push({
					check: {
						checkStatus: 1,
						checkDate: this.getCurrentTime()
					},
					procedureStepId:"",
					result: {},
				})
				
				//  工单处理
				const res = await request({
					url: "api/oct/wemini/bus/workOrder/handleWorkOrder",
					method: "POST",
					data: this.handleQuery
				})
				if (res.status == 0) {
					let routes = getCurrentPages();
					let curRoute = routes[routes.length - 2]
					await curRoute.$vm.getWorkDetailHandle()
					curRoute.$vm.getButtonPermission()

					uni.navigateBack({
						delta: 1
					})
					uni.showToast({
						title: '处理成功!',
						icon: 'none',
						duration: 2000,
					})
				} else {
					uni.showToast({
						title: `处理失败!原因:${res.description}`,
						icon: 'none',
						duration: 2000,
					})
				}
			},
			checkTypeHandle(e) {
				const list = e.detail.value.map(item => JSON.parse(item))
				const check = this.hasRequireHandle(list[0].procedureStepId)

				const findObj = this.procedureSteps.find(item => item.procedureStepId == list[0].procedureStepId)
				if (findObj) {
					findObj.result.itemIds = list.map(item => item.id)
				} else {
					this.procedureSteps.push({
						procedureStepId: list[0].procedureStepId,
						check,
						result: {
							itemIds: list.map(item => item.id),
							imgPaths: [],
							videoPaths: []
						}
					})
				}
			},
			radiotypeHandle(e) {
				//  单选的处理流程
				const obj = JSON.parse(e.detail.value)
				console.log('obj', obj);
				const check = this.hasRequireHandle(obj.procedureStepId)

				const findObj = this.procedureSteps.find(item => item.procedureStepId == obj.procedureStepId)
				if (findObj) {
					findObj.result.content = obj.content
					findObj.result.itemIds = [obj.id]
				} else {
					this.procedureSteps.push({
						procedureStepId: obj.procedureStepId,
						check,
						result: {
							content: obj.content,
							itemIds: [obj.id],
							imgPaths: [],
							videoPaths: []
						}
					})
				}

			},
			async getProcessHandle() {
				//  获取工序步骤
				const res = await request({
					url: "api/oct/wemini/bus/workOrder/getProcedureStepList",
					method: "POST",
					data: {
						procedureId: this.checkItemData.procedureVo.procedureId,
						orderId: this.checkItemData.orderId
					}
				})
				if (res.status == 0) {
					this.processList = res.payload.filter(item => {
						item.result = {}
						item.result.imgPaths = []
						item.result.content = ""
						item.result.videoPaths = []
						if (item.procedureStep.type == 50) this.scanSignData = item
						else return item
					})
				} else {
					uni.showToast({
						title: "获取工序内容失败!",
						icon: "none",
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.process-step-main {
		height: calc(100vh - 120rpx);
		background-color: #f2f6ff;
		padding: 0 30rpx;
		box-sizing: border-box;
		overflow: auto;

		.video-body {
			.video-list {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.paging {
				display: flex;
				justify-content: center;

				>view {
					width: 240rpx;
					height: 64rpx;
					color: #fff;
					background-color: #6490FD;
					text-align: center;
					line-height: 64rpx;
					border-radius: 40rpx;
					margin-top: 20rpx;
				}

				.last {
					margin-right: 50rpx;

				}

				.display {
					background-color: #C5C5C5 !important;
				}
			}
		}

		.serial {
			width: 50rpx;
			height: 50rpx;
			font-size: 30rpx;
			border-radius: 50%;
			background-color: @main_bg;
			color: #fff;
			text-align: center;
			line-height: 50rpx;
		}

		.step {
			position: relative;

			.step-body {
				.item {
					padding: 30rpx;
					box-sizing: border-box;
					margin: 30rpx 0;

					.item-title {
						display: flex;
						align-items: center;

						.name {
							margin-left: 40rpx;
						}
					}

					.item-body {
						margin: 20rpx 0 20rpx 0;
						font-size: 28rpx;
						color: #8A93A9;
						display: flex;
						flex-direction: column;

						.input {
							border: 3rpx solid #eaedf0;
							height: 80rpx;
							border-radius: 20rpx;
							padding: 0 20rpx;
						}

						textarea {
							height: 100rpx;
							padding: 15rpx;
							border: 3rpx solid #eaedf0;
							border-radius: 20rpx;
						}

						>view {
							padding: 15rpx 0;

							text {
								margin-left: 15rpx;
							}
						}

					}

					.item-content {
						color: #8A93A9;
						font-size: 24rpx;

						.title {
							margin-bottom: 15rpx;
						}
					}

					.image-class,
					.video-class {
						.title {
							margin: 20rpx 0;
						}

						.image-list {
							display: flex;

							.image-item {
								display: flex;
							}
						}
					}
				}
			}

			.footer {
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 0;
				display: flex;
				font-size: 24rpx;
				height: 120rpx;
				>view:nth-child(1) {
					height: 120rpx;
					line-height: 120rpx;
					text-align: center;
					flex: 1;
					color: #6892fa;
					background-color: #fff;
				}

				>view:nth-child(2) {
					height: 120rpx;
					line-height: 120rpx;
					text-align: center;
					flex: 1;
					color: #fff;
					background-color: #6892fa;
				}
			}
		}

	}
</style>